<template>
  <div>
    <div class="list-btn">
      用户姓名:<Input v-model.trim="params.realname" placeholder="请输入姓名" style="width: 200px" clearable @keyup.enter.native="getList(url)" />
    </div>
    <div class="list-btn">
      手机号:<Input v-model.trim="params.phone" placeholder="请输入手机号" style="width: 200px" clearable @keyup.enter.native="getList(url)" />
    </div>
    <div class="list-btn">
      订单号:<Input v-model.trim="params.nid" placeholder="请输入订单号" style="width: 200px" clearable @keyup.enter.native="getList(url)" />
    </div>
  <!--  <div class="list-btn">
      状态:
      <Select clearable style="width:200px" v-model="params.status" placeholder="请选择" @on-change="get(params.status)">
        <Option v-for="item in statusList" :value="item.id" :key="item.id">{{ item.name }}</Option>
      </Select>
    </div>-->
    <div class="list-btn">
      <Button type="primary" @click="getList(url,'refresh')">搜索</Button>
    </div>
    <div class="list-btn">
      <Button type="primary" @click="allUp();btnType='double';">批量分配</Button>
    </div>
    <div class="list-btn">
      <Button type="primary" @click="btnType='all';showModal.isShow = true;">一键分配</Button>
    </div>

    <page-list :listTitle="listTitle" :list="list" :loading="loading" @selectItem="ids = $event;"></page-list>
    <page-button :current="params.pageCurrent"  :total="total" @changePageNum="params.pageCurrent = $event; getList(url)" @changePageSize="params.pageLimit = $event; getList(url)"></page-button>

    <Modal
      v-model="showModal.isShow"
      :mask-closable="false"
      :closable="false"
      title="分配订单"
      :footer-hide="true"
      :loading="loading">
      <Form ref="formRole" :rules="ruleValidate" :model="formRole" :label-width="120" v-if="btnType=='all'">
        <FormItem label="催收分配天数" prop="collectionDay">
           <Select clearable v-model="formRole.collectionDay" placeholder="请选择" style="width:200px">
            <Option v-for="item in urgeDay" :value="item" :key="item">{{item}}</Option>
            <Option :value="30">30</Option>
          </Select>
        </FormItem>
         <FormItem label="催收人" prop="collectionUserId">
           <CheckboxGroup v-model="formRole.collectionUserId">
             <Checkbox v-for="(item,index) in sysUser" :label="item.id" :key="index">{{item.userName}}</Checkbox>
           </CheckboxGroup>
        </FormItem>
      </Form>
      <Form ref="formRole2" :rules="ruleValidate2" :model="formRole2" :label-width="120" v-if="btnType=='double'">
        <FormItem label="催收分配天数" prop="collectionDay">
           <Select clearable v-model="formRole2.collectionDay" placeholder="请选择" style="width:200px">
            <Option v-for="item in urgeDay" :value="item" :key="item">{{item}}</Option>
            <Option :value="30">30</Option>
          </Select>
        </FormItem>
        <FormItem label="催收人" prop="collectionUserId">
          <Select clearable v-model="formRole2.collectionUserId" placeholder="请选择" style="width:200px">
            <Option v-for="(item,index) in sysUser" :value="item.id" :key="index">{{item.userName}}</Option>
          </Select>
        </FormItem>
      </Form>
      <Form ref="formRole1" :rules="ruleValidate1" :model="formRole1" :label-width="120"  v-if="btnType=='one'">
        <FormItem label="催收分配天数" prop="collectionDay">
          <Select clearable v-model="formRole1.collectionDay" placeholder="请选择" style="width:200px">
            <Option v-for="item in urgeDay" :value="item" :key="item">{{item}}</Option>
            <Option :value="30">30</Option>
          </Select>
        </FormItem>
        <FormItem label="催收人" prop="collectionUserId">
           <Select clearable v-model="formRole1.collectionUserId" placeholder="请选择" style="width:200px">
            <Option v-for="(item,index) in sysUser" :value="item.id" :key="index">{{item.userName}}</Option>
          </Select>
        </FormItem>
      </Form>
      <div style="margin-left: 350px;">
        <Button @click="showModal.isShow = false;">取消</Button>
        <Button type="primary" @click.prevent="UpdateAllData"  v-if="btnType=='all'">确定</Button>
        <Button type="primary" @click.prevent="UpdatedoubleData"  v-if="btnType=='double'">确定</Button>
        <Button type="primary" @click.prevent="UpdateData"  v-if='btnType== "one"'>确定</Button>
      </div>
    </Modal>


  </div>
</template>

<script>
  import listMixin from '../../mixin/list'
  import pageList from '../../template/listTemplate'
  import pageButton from '../../template/pageBtnTemplate'
  import confirmDialog from '../../template/confirmDialogTemplate'
  export default {
    mixins:[listMixin],
    components: {
      pageList,
      pageButton,
      confirmDialog
    },
    methods:{
      UpdatedoubleData(){
        if(this.ids){
          this.$refs.formRole2.validate((valid) => {
            if (valid) {
              let data = {
                nids:this.ids,
                collectionUserId:this.formRole2.collectionUserId,
                collectionDay:this.formRole2.collectionDay
              }
              this.$post('/bkcollection/allot/order',data)
                .then((res) => {
                  if(res.code === 0){
                    this.showModal.isShow = false;
                    this.$Message.success('提交成功！');
                    this.getList(this.url)
                  }else if(res.code == 1){
                    this.$Message.warning(res.msg);
                    this.getList(this.url)
                  }
                }, (err) => {
                  console.log(err);
                })
            }
          })
        }else{
          this.$message.error('请勾选需要分配的订单！')
        }

      },
      UpdateData(){
        this.$refs.formRole1.validate((valid) => {
           if (valid) {
            let data = {
              nids:this.formRole1.nid,
              collectionUserId:this.formRole1.collectionUserId,
              collectionDay:this.formRole1.collectionDay
            }
            this.$post('/bkcollection/allot/order',data)
              .then((res) => {
                if(res.code === 0){
                  this.showModal.isShow = false;
                  this.$Message.success('提交成功！');
                  this.getList(this.url)
                }else if(res.code == 1){
                  this.$Message.warning(res.msg);
                  this.getList(this.url)
                }
              }, (err) => {
                console.log(err);
              })
          }
        })

      },
      UpdateAllData(){
        this.$refs.formRole.validate((valid) => {
          if(valid){
            let data = {
              collectionUserIds:this.formRole.collectionUserId.join(','),
              collectionDay:this.formRole.collectionDay,
              type:'M1'
            }
            let selectArr = this.formRole.collectionUserId;
            let selectName = [];
            for(let i=0;i<selectArr.length;i++){
              console.log(selectArr[i])
              for(let j=0;j<this.sysUser.length;j++){
                if(selectArr[i] == this.sysUser[j].id){
                  selectName.push(this.sysUser[j].userName)
                }
              }
            }
            this.$Modal.confirm({
              title: '提示',
              content: `<p>确认所有单子发配给: <span style="color:red">${selectName}</span> ？</p>`,
              onOk: () => {
                this.$post('/bkcollection/auto/order',data)
                  .then((res) => {
                    if(res.code === 0){
                      this.showModal.isShow = false;
                      this.$Message.success('提交成功！');
                      this.getList(this.url)
                    }else if(res.code == 1){
                      this.$Message.warning(res.msg);
                      this.getList(this.url)
                    }
                  }, (err) => {
                    console.log(err);
                  })
              },
              onCancel: () => {

              }
            });




          }
        })

      },
      getSys(){
        this.$post('/sysUser/collection/list',{fb1:'2'})
          .then((res) => {
            if(res.code === 0){
              this.sysUser = res.data;
            }
          }, (err) => {
            console.log(err);
          })
      },
      // clearForm(){
      //   if(this.$refs.formRole){
      //     this.resetValidate('formRole');
      //   }
      //   if(this.$refs.formRole1){
      //     this.resetValidate('formRole1');
      //   }
      //   if(this.$refs.formRole2){
      //      this.resetValidate('formRole2');
      //   }
      // }
    },
    data () {
      return {
        selectedName:'',
        tag: {
          'title': 'M1待分配',
          'path': '/work/manyDays/list'
        },
        urgeDay:15,
        btnType:'one',
        collectionUserId:'',
        showModal:{
          isShow:false
        },
        sysUser:[],
        formRole: {},
        formRole1: {},
        formRole2: {},
        statusList:[
          {
            id: 0,
            name:'未分配'
          },
          {
            id: 1,
            name: '已分配'
          }
        ],
        listTitle: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '订单号',
            minWidth: 200,
            key: 'nid',
            align:'left',
          },
          {
            title: '用户姓名',
            key: 'realname',
            minWidth:100,
            align:'center'
          },
          {
            title: '手机号',
            key: 'phone',
            minWidth:120,
            align:'center',
            render: (h, params) => {
              let phone = params.row.phone;
              return h('div', phone?`${phone.substr(0,3)}****${phone.substr(7)}`:'—')
            }
          },
          {
            title: '借款周期(天)',
            key: 'loanDay',
            minWidth:110,
            align:'center'
          },
          {
            title: '借款金额(元)',
            key: 'loanMoney',
            minWidth:110,
            align:'center',
            render: (h, params) => {
              return h('div', this.toYuan(params.row.loanMoney))
            }
          },
          {
            title: '应还金额(元)',
            key: 'needRepayment',
            minWidth:110,
            align:'center',
            render: (h, params) => {
              return h('div', this.toYuan(params.row.needRepayment))
            }
          },
        /*  {
            title: '应还本金(元)',
            key: 'realMoney',
            minWidth:110,
            align:'center',
            render: (h, params) => {
              return h('div', this.toYuan(params.row.realMoney))
            }
          },*/
          {
            title: '逾期费用(元)',
            key: 'overdueAmount',
            minWidth:110,
            align:'center',
            render: (h, params) => {
              return h('div', this.toYuan(params.row.overdueAmount))
            }
          },
          {
            title: '逾期天数',
            key: 'days',
            minWidth:110,
            align:'center'
          },
          {
            title: '已还金额(元)',
            key: 'repaymentMoney',
            minWidth:110,
            align:'center',
            render: (h, params) => {
              return h('div', this.toYuan(params.row.repaymentMoney))
            }
          },
          {
            title: '状态',
            key: 'status',
            minWidth:110,
            align:'center',
            render: (h, params) => {// 审核状态 0审核中，1通过，2拒绝 ，3电核
              let d = {};
              switch (params.row.status){
                case 0:
                  d.txt = '未分配';
                  d.color = '#f90';
                  break;
                case 1:
                  d.txt = '催收中';
                  d.color = '#19be6b';
                  break;

              }
              return h('div', {
                props: {},
                style:{
                  color:d.color
                }
              }, d.txt)
            },
          },
          {
            title: '操作',
            key: 'action',
            align:'center',
            width: 200,
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'info',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.btnType = 'one';
                      this.formRole1.nid = params.row.nid;
                      this.showModal.isShow = true;
                      // this.clearForm()
                    }
                  }
                }, '分配'),

              ]);
            }
          },
        ],
        ruleValidate: {
          collectionUserId: [
              { required: true, message: '请选择催收人', type:'array'},
          ],
          collectionDay: [
              { required: true, message: '请选择天数', type:'integer'},
            ]
        },
        ruleValidate1: {
          collectionUserId: [
            { required: true, message: '请选择催收人', type:'number'},
          ],
          collectionDay: [
            { required: true, message: '请选择天数', type:'integer'},
          ]
        },

        ruleValidate2: {
          collectionUserId: [
            { required: true, message: '请选择催收人', type:'number'},
          ],
          collectionDay: [
            { required: true, message: '请选择天数', type:'integer'},
          ]
        },
        url: '/bkallocation/manyDays/list',
        nameListUrl: '',
        params: {
          //status:'',
          pageCurrent: 1,
          pageLimit: 10
        },

      }
    },
    created(){
      this.getSys();
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .list-btn{
    margin-bottom: 5px;
    margin-right: 5px;
    display: inline-block;
  }
  .refresh-btn{
    float: right;
  }

</style>
